<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	template="../Template/Template.xhtml"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:fmt="http://java.sun.com/jsp/jstl/fmt"
	xmlns:p="http://primefaces.org/ui">

	<ui:define name="title">
    Trang Đăng ký
  	</ui:define>

	<ui:define name="content">

		<h:outputScript library="js" name="TrangDangKy.js" target="head" />
		<script type="text/javascript" src="https://www.google.com/jsapi"></script>

		<script type="text/javascript">
			google.load("elements", "1", {
				packages : "keyboard"
			});

			function onLoad() {
				var kbd = new google.elements.keyboard.Keyboard(
						[ google.elements.keyboard.LayoutCode.ENGLISH ], [
								'password', 'confirm' ]);
			}

			google.setOnLoadCallback(onLoad);

			var iid = setInterval(function() {
				if (document.getElementById('kbd')) {
					google.elements.keyboard.enableMinMaxMode(false);
					kbd.setVisible(false);
					clearInterval(iid);
				}
			}, 500);
		</script>

		<!-- password strength -->
		<style>
.is0 {
	background: url(../Images/progressImg.png) no-repeat 0 0;
	width: 138px;
	height: 7px;
}

.is10 {
	background-position: 0 -7px;
}

.is20 {
	background-position: 0 -14px;
}

.is30 {
	background-position: 0 -21px;
}

.is40 {
	background-position: 0 -28px;
}

.is50 {
	background-position: 0 -35px;
}

.is60 {
	background-position: 0 -42px;
}

.is70 {
	background-position: 0 -49px;
}

.is80 {
	background-position: 0 -56px;
}

.is90 {
	background-position: 0 -63px;
}

.is100 {
	background-position: 0 -70px;
}
</style>

		<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
		<script type="text/javascript">
			$.fn.passwordStrength = function(options) {
				return this
						.each(function() {
							var that = this;
							that.opts = {};
							that.opts = $.extend({},
									$.fn.passwordStrength.defaults, options);

							that.div = $(that.opts.targetDiv);
							that.defaultClass = that.div.attr('class');

							that.percents = (that.opts.classes.length) ? 100 / that.opts.classes.length
									: 100;

							v = $(this)
									//Them lenh bat su kien khi textbox thay doi
									.keyup(
											function() {

												if (typeof el == "undefined")
													this.el = $(this);
												var s = getPasswordStrength(this.value);
												var p = this.percents;
												var t = Math.floor(s / p);

												if (s >= 100)
													t = this.opts.classes.length - 1;

												this.div
														.removeAttr('class')
														.addClass(
																this.defaultClass)
														.addClass(
																this.opts.classes[t]);

											})

						});

				function getPasswordStrength(H) {
					var D = (H.length);
					if (D > 5) {
						D = 5
					}
					var F = H.replace(/[0-9]/g, "");
					var G = (H.length - F.length);
					if (G > 3) {
						G = 3
					}
					var A = H.replace(/\W/g, "");
					var C = (H.length - A.length);
					if (C > 3) {
						C = 3
					}
					var B = H.replace(/[A-Z]/g, "");
					var I = (H.length - B.length);
					if (I > 3) {
						I = 3
					}
					var E = ((D * 10) - 20) + (G * 10) + (C * 15) + (I * 10);
					if (0 > E) {
						E = 0
					}
					if (E > 100) {
						E = 100
					}
					return E
				}

			};

			$.fn.passwordStrength.defaults = {
				classes : Array('is10', 'is20', 'is30', 'is40', 'is50', 'is60',
						'is70', 'is80', 'is90', 'is100'),
				targetDiv : '#passwordStrengthDiv',
				cache : {}
			}
			$(document).ready(function() {
				$('input[name="password"]').passwordStrength();
			});
		</script>




		<div id="MainPanel" align="left">
			<div class="ContentPart">
				<h3 class="ContentPartHeader">THÔNG TIN CÁ NHÂN</h3>
				<div class="ContentPartContent" align="left">
					<div class="ins">Họ tên của bạn</div>
					<h:inputText class="txtField"
						value="#{trangDangKyBean.taikhoandangky.hoten}" />
					<br />
					<div class="ins">Ngày sinh</div>
					<h:selectOneMenu styleClass="combobox"
						value="#{trangDangKyBean.ngay}">
						<f:selectItem itemValue="0" itemLabel="[ngày]" />

						<c:forEach var="i" begin="1" end="31">
							<f:selectItem itemValue="#{i}" itemLabel="#{i}" />
						</c:forEach>

						<f:ajax event="valueChange" render="validdate"
							listener="#{trangDangKyBean.CheckValidDate}" />
					</h:selectOneMenu>

					<h:selectOneMenu styleClass="combobox"
						value="#{trangDangKyBean.thang}">
						<f:selectItem itemValue="0" itemLabel="[tháng]" />

						<c:forEach var="i" begin="1" end="12">
							<f:selectItem itemValue="#{i}" itemLabel="#{i}" />
						</c:forEach>

						<f:ajax event="valueChange" render="validdate"
							listener="#{trangDangKyBean.CheckValidDate}" />
					</h:selectOneMenu>

					<h:selectOneMenu styleClass="combobox"
						value="#{trangDangKyBean.nam}">
						<f:selectItem itemValue="0" itemLabel="[năm]" />

						<c:forEach var="i" begin="1" end="120">
							<f:selectItem itemValue="#{i+1900}" itemLabel="#{i+1900}" />
						</c:forEach>

						<f:ajax event="valueChange" render="validdate"
							listener="#{trangDangKyBean.CheckValidDate}" />
					</h:selectOneMenu>

					<h:outputText id="validdate"
						value="#{trangDangKyBean.validdatemess}" />


					<br />
					<div class="ins">Bạn sống tại</div>
					<h:inputText class="txtField"
						value="#{trangDangKyBean.taikhoandangky.diachi}" />

					<br />
					<div class="ins">Số điện thoại *:</div>
					<h:inputText class="txtField"
						value="#{trangDangKyBean.taikhoandangky.sodienthoai}">
						<f:ajax event="keyup" render="validphonenumber"
							listener="#{trangDangKyBean.CheckValidPhonenumber}" />

					</h:inputText>
					<h:outputText id="validphonenumber"
						value="#{trangDangKyBean.validphonenumbermess}" />

					<br />
					<div class="ins">Địa chỉ email *:</div>

					<h:inputText class="txtField"
						value="#{trangDangKyBean.taikhoandangky.email}">
						<f:ajax event="keyup" render="validemail"
							listener="#{trangDangKyBean.CheckValidEmail}" />

					</h:inputText>
					<h:outputText id="validemail"
						value="#{trangDangKyBean.validemailmess}" />


					<!-- <div>
						<div class="ins">Họ tên của bạn</div>
						<h:inputText value="#{trangDangKyBean.taikhoandangky.hoten}" />

					</div>

					<div>
						<div class="ins">Ngày sinh</div>

						<h:selectOneMenu value="#{trangDangKyBean.ngay}">
							<f:selectItem itemValue="0" itemLabel="[ngày]" />

							<c:forEach var="i" begin="1" end="31">
								<f:selectItem itemValue="#{i}" itemLabel="#{i}" />
							</c:forEach>

							<f:ajax event="valueChange" render="validdate"
								listener="#{trangDangKyBean.CheckValidDate}" />
						</h:selectOneMenu>

						<h:selectOneMenu value="#{trangDangKyBean.thang}">
							<f:selectItem itemValue="0" itemLabel="[tháng]" />

							<c:forEach var="i" begin="1" end="12">
								<f:selectItem itemValue="#{i}" itemLabel="#{i}" />
							</c:forEach>

							<f:ajax event="valueChange" render="validdate"
								listener="#{trangDangKyBean.CheckValidDate}" />
						</h:selectOneMenu>

						<h:selectOneMenu value="#{trangDangKyBean.nam}">
							<f:selectItem itemValue="0" itemLabel="[năm]" />

							<c:forEach var="i" begin="1" end="120">
								<f:selectItem itemValue="#{i+1900}" itemLabel="#{i+1900}" />
							</c:forEach>

							<f:ajax event="valueChange" render="validdate"
								listener="#{trangDangKyBean.CheckValidDate}" />
						</h:selectOneMenu>

						<h:outputText id="validdate"
							value="#{trangDangKyBean.validdatemess}" />
					</div>
					<div>
						<div class="ins">Bạn sống tại</div>
						<h:inputText value="#{trangDangKyBean.taikhoandangky.diachi}" />
					</div>
					<div>
						<div class="ins">Số điện thoại *:</div>
						<h:inputText value="#{trangDangKyBean.taikhoandangky.sodienthoai}">
							<f:ajax event="keyup" render="validphonenumber"
								listener="#{trangDangKyBean.CheckValidPhonenumber}" />

						</h:inputText>
						<h:outputText id="validphonenumber"
							value="#{trangDangKyBean.validphonenumbermess}" />
					</div>

					<div>
						<div class="ins">Địa chỉ email *:</div>

						<h:inputText value="#{trangDangKyBean.taikhoandangky.email}">
							<f:ajax event="keyup" render="validemail"
								listener="#{trangDangKyBean.CheckValidEmail}" />

						</h:inputText>
						<h:outputText id="validemail"
							value="#{trangDangKyBean.validemailmess}" />
					</div>
 -->

				</div>

				<div class="ContentPart">
					<h3 class="ContentPartHeader">THÔNG TIN TÀI KHOẢN</h3>
					<div class="ContentPartContent" align="left">
						<br />
						<div class="ins">Tên đăng nhập *</div>
						<h:inputText class="txtField"
							value="#{trangDangKyBean.taikhoandangky.tendangnhap}"
							maxlength="24">
							<f:ajax event="keyup" render="validacc"
								listener="#{trangDangKyBean.CheckValidAcc}" />
						</h:inputText>
						<h:outputText id="validacc"
							value="#{trangDangKyBean.validaccmess}" />

						<br />
						<div class="ins">Mật khẩu *</div>
						<h:inputText id="password" name="password" class="txtField"
							value="#{trangDangKyBean.taikhoandangky.matkhau}" maxlength="32">
							<f:ajax event="keyup" render="validpass"
								listener="#{trangDangKyBean.CheckValidPass}" />
						</h:inputText>
						<div id="passwordStrengthDiv" class="is0"></div>
						<h:outputText id="validpass"
							value="#{trangDangKyBean.validpassmess}" />

						<br />
						<div class="ins">Xác nhận mật khẩu *</div>
						<h:inputText id="confirm" class="txtField"
							value="#{trangDangKyBean.confirmPassword}" maxlength="32">
							<f:ajax event="keyup" render="validcfrpass"
								listener="#{trangDangKyBean.CheckValidCfrpass}" />
						</h:inputText>
						<h:outputText id="validcfrpass"
							value="#{trangDangKyBean.validcfrpassmess}" />
						<!-- <div>
							<div class="ins">Tên đăng nhập *</div>
							<h:inputText
								value="#{trangDangKyBean.taikhoandangky.tendangnhap}"
								maxlength="24">
								<f:ajax event="keyup" render="validacc"
									listener="#{trangDangKyBean.CheckValidAcc}" />
							</h:inputText>
							<h:outputText id="validacc"
								value="#{trangDangKyBean.validaccmess}" />
						</div>

						<div>
							<div class="ins">Mật khẩu *</div>
							<h:inputText id="password" name="password"
								value="#{trangDangKyBean.taikhoandangky.matkhau}" maxlength="32">
								<f:ajax event="keyup" render="validpass"
									listener="#{trangDangKyBean.CheckValidPass}" />
							</h:inputText>
							<div id="passwordStrengthDiv" class="is0"></div>
							<h:outputText id="validpass"
								value="#{trangDangKyBean.validpassmess}" />
						</div>

						<div>
							<div class="ins">Xác nhận mật khẩu *</div>
							<h:inputText id="confirm"
								value="#{trangDangKyBean.confirmPassword}" maxlength="32">
								<f:ajax event="keyup" render="validcfrpass"
									listener="#{trangDangKyBean.CheckValidCfrpass}" />
							</h:inputText>
							<h:outputText id="validcfrpass"
								value="#{trangDangKyBean.validcfrpassmess}" />
						</div> -->
					</div>
				</div>
				<div class="ContentPart">
					<h3 class="ContentPartHeader">MÃ KIỂM TRA</h3>

					<div class="ContentPartContent" align="left">
						<p:messages showDetail="true" />

						<p:captcha label="Captcha" theme="white"
							validatorMessage="Mã kiểm tra không chính xác"
							requiredMessage="Mã kiểm tra không được để trống." />
					</div>

					<!-- <p:commandButton value="Đăng kí" ajax="false"
						action="#{trangDangKyBean.DangKy()}" /> -->

					<h:commandButton class="buttonLink button flowToRight"
						action="#{trangDangKyBean.DangKy()}" value="Đăng kí" />
					<br /> <br />
				</div>
			</div>
		</div>
	</ui:define>
</ui:composition>

